import React, { useRef } from 'react'
import './TodoHeader.css'
//导入仓库中的动作方法
import { asyncaddnewtodo } from '../../../store/modules/todos'
//导入钩子
import { useDispatch } from 'react-redux'
//导入nanoid包
import { nanoid } from 'nanoid'
export default function TodoHeader() {
    let ipt = useRef(); // {current:undefined}
    let dispatch = useDispatch();
    let addtodo = e => {
        //判断是否通过回车键
        if (e.keyCode === 13) {
            //获取文本框中的数据
            let title = ipt.current.value;
            //通过dispatch进行不同动作的分发,动作函数中的实参就是我们的载荷数据
            dispatch(asyncaddnewtodo({
                id: nanoid(),
                title,
                done: false
            }));
            //请求文本框中的值
            ipt.current.value = ''
        }
    }
    return (
        <div className="todo-header">
            <input type="text" placeholder="请输入你的任务名称，按回车键确认" ref={ipt} onKeyUp={addtodo} />
        </div>
    )
}
